<!DOCTYPE html>
<html>

<head>
	<title>药品信息</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="hospital" />
	<script type="applijewelleryion/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1);
		} </script>
	<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
	<!-- Custom Theme files -->
	<link href="css/style.css" rel='stylesheet' type='text/css' />
	<script src="js/jquery-1.11.1.min.js"></script>
	<!--webfonts-->
	<link href='https://fonts.googleapis.com/css?family=Antic' rel='stylesheet' type='text/css' />
	<link
		href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700|Six+Caps'
		rel='stylesheet' type='text/css' />
	<!--//webfonts-->
	<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<!--light-box-files -->
	<script src="js/modernizr.custom.97074.js"></script>
	<script src="js/jquery.chocolat.js"></script>
	<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">

	<script type="text/javascript" charset="utf-8">
		$(function () {
			$('.g-left a').Chocolat();
		});
	</script>
	<!--light-box-files -->
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function ($) {
			$(".scroll").click(function (event) {
				event.preventDefault();
				$('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1200);
			});
		});
	</script>
	<script type="text/javascript">
		$(document).ready(function () {
			$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>

	<style>
		.header-bottom {
			background-color: #545c64;
			padding: 0.5em 0;
		}

		.nav-item.active {
			background-color: #c0c0c0;
			color: #ffd04b;
		}

		table {
			width: 100%;
			border-collapse: collapse;
		}

		th,
		td {
			padding: 8px;
			border-bottom: 1px solid #ddd;
		}

		tr:hover {
			background-color: #f5f5f5;
		}

		.call-btn {
			padding: 8px 16px;
			background-color: #4CAF50;
			color: white;
			border: none;
			cursor: pointer;
		}
	</style>
</head>

<body>
	<!-- header-bottom -->
	<div class="header-bottom">
		<div class="container">
			<nav class="navbar navbar-dark bg-dark" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">切换导航</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<!--/.navbar-header-->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="nav-item"><a href="index.html">首页</a></li>
						<li class="nav-item"><a href="register.html">预约挂号</a></li>
						<li class="nav-item"><a href="appointment.html">预约信息</a></li>
						<li class="nav-item active"><a href="medicine.html">药品信息</a></li>
						<li class="nav-item"><a href="login.html">登录注册</a></li>
					</ul>
				</div>
				<!--/.navbar-collapse-->
			</nav>
			<div class="search-box">
				<div id="sb-search" class="sb-search">
					<form>
						<input class="sb-search-input" placeholder="Enter your search term..." type="search"
							name="search" id="search">
						<input class="sb-search-submit" type="submit" value="">
						<span class="sb-icon-search"> </span>
					</form>
				</div>
			</div>
			<div class="clearfix"> </div>

			<!-- search-scripts -->
			<script src="js/classie.js"></script>
			<script src="js/uisearch.js"></script>
			<script>
				new UISearch(document.getElementById('sb-search'));
			</script>
			<!-- //search-scripts -->

		</div>
	</div>
	<!-- /header-bottom -->

	<table id="medicine-table">
		<tr>
			<th style="verticle-align:middle;text-align:center">药品编号</th>
			<th style="verticle-align:middle;text-align:center">药品名称</th>
			<th style="verticle-align:middle;text-align:center">价格</th>
			<th style="verticle-align:middle;text-align:center">库存</th>
			<th></th>
		</tr>

	</table>

	<script>
		// 从后端获取病人数据并渲染到页面
		fetch('http://localhost:8888/medicine/getAll',{
			headers: {
				'Token': window.localStorage.getItem('token'),
			}
		})
			.then(response => response.json())
			.then(medicines => {
				const table = document.getElementById('medicine-table');
				console.log(medicines)
				medicines.forEach(medicine => {
					const row = table.insertRow();
					row.innerHTML = `
		            <td style="verticle-align:middle;text-align:center">${medicine.medicineId}</td>
		            <td style="verticle-align:middle;text-align:center">${medicine.medicineName}</td>
		            <td style="verticle-align:middle;text-align:center">${medicine.unitPrice}</td>
		            <td style="verticle-align:middle;text-align:center">${medicine.stockQuantity}</td> 
		          `;
				});
			});


	</script>
</body>

</html>